<!DOCTYPE html>
<!--[if IE 7]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8" />
		<title>扩展学习_${webName}</title>
		<meta name="description" content="" />
		<meta name="author" content="HuangBQ | ${wwwRoot}" />
		<#include "../inc/head-common.ftl">
	</head>
	<body>
		<#include "../inc/header.ftl">
		
		<!-- Main content -->
		<div class="container" role="main">
		
			<!-- Breadcrumbs -->
			<ul class="breadcrumb">
				<li><a href="${wwwRoot}"><span class="icon-home"></span> ${wwwName}</a></li>
				<li><a href="${webRoot}">${webName}</a></li>
				<li class="active">扩展学习</li>
			</ul>
			<!-- Breadcrumbs -->
			
			<!-- Main data container -->
			<div class="content">
			
				<!-- Page header -->
				<div class="page-header">
					<h1><span class="icon-plus"></span> 扩展学习 <small>技术文章精选、IT职场、互联网新事...每日关注，拓展视野</small></h1>
					<ul class="page-header-actions">
						<li class="active"><a href="${webRoot}ext/post.do" class="btn btn-wuxia pull-right" title="有hadoop相关的好的学习内容，欢迎推荐过来大家一起学习" target="_blank"><span class="icon-share"></span> 我要推荐好内容</a></li>
					</ul>
				</div>
				
				<div class="page-container">
					<div class="row">
							<article class="span8">														
							<table class="datatable table table-striped" id="example">
								<tbody>															
								</tbody>
							</table>
							</article>
									
							<article class="span4">	
								<div class="alert alert-success">							
								<p><img src="${uploadRoot}avatar/default.png" alt="小讲" /> <strong>嘿！${Session["dw_name"]?default("无名士")}</strong>，根据你的学习情况，小讲推荐你结合个人兴趣选择性学习如下课程中的一至两门：</p>
								
								<form class="form-gallery" />
									<ul class="thumbnails">
										<li class="span2">
											<input id="img1" type="checkbox" value="option" checked="" />
											<a class="thumbnail" href="#"><img alt="Hadoop 2.X大数据平台V3" title="Hadoop 2.X大数据平台V3" src="${imagesRoot}course/c1.jpg"/></a>
										</li>							
										<li class="span2">
											<input id="img3" type="checkbox" value="option" checked="" />
											<a class="thumbnail" href="#"><img alt="HBase进阶" title="HBase进阶" src="${imagesRoot}course/c3.jpg" /></a>
										</li>
										<li class="span2">
											<input id="img4" type="checkbox" value="option" />
											<a class="thumbnail" href="#"><img alt="Hive进阶" title="Hive进阶" src="${imagesRoot}course/c4.jpg" /></a>
										</li>
										<!--li class="span2">
											<input id="img5" type="checkbox" value="option" />
											<a class="thumbnail" href="#"><img alt="Hadoop/Spark企业应用实战" title="Hadoop/Spark企业应用实战" src="${imagesRoot}course/c5.jpg" /></a>
										</li>
										<li class="span2">
											<input id="img6" type="checkbox" value="option" />
											<a class="thumbnail" href="#"><img alt="数据挖掘必备技能—R语言实践篇" title="数据挖掘必备技能—R语言实践篇" src="${imagesRoot}course/c6.jpg" /></a>
										</li-->
										<li class="span2">
											<input id="img2" type="checkbox" value="option" />
											<a class="thumbnail" href="#"><img alt="Spark 1.X 大数据平台V2" title="Spark 1.X 大数据平台V2" src="${imagesRoot}course/c2.jpg" /></a>
										</li>
									</ul>
									<div class="form-actions">
										<button class="btn btn-wuxia btn-primary" type="submit">选好了，立即购买</button>
									</div>
								</form>
								</div>
							</article>
					
					</div>				
					
				</div>
				<!-- /Page container -->
			
			</div>
			<!-- /Main data container -->
			
		</div>
		<!-- /Main content -->
		
		<#include "../inc/footer.ftl">
		
		<script>
			$(document).ready(function() {
					
				/* Highlight gallery item when clicked */
				$('.form-gallery input[type="checkbox"]').click(function() {
					$(this).next('a').toggleClass('active');
				});
				$('.form-gallery input[type="checkbox"]:checked').next('a').addClass('active');
			});
		</script>
		<!-- jQuery DataTable -->
		<script src="${scriptRoot}plugins/dataTables/jquery.datatables.min.js"></script>
		<script>
            /*js解决通过json传来的timestamp类型时间的显示问题    time即是timestamp中的time属性的值*/
            function timeStamp2String(time){
			    var datetime = new Date();
			    datetime.setTime(time);
			    var year = datetime.getFullYear();
			    var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
			    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
			    var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
			    var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
			    var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
			    return year + "-" + month + "-" + date;
			}

			
			/* API method to get paging information */
			$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
			{
				return {
					"iStart":         oSettings._iDisplayStart,
					"iEnd":           oSettings.fnDisplayEnd(),
					"iLength":        oSettings._iDisplayLength,
					"iTotal":         oSettings.fnRecordsTotal(),
					"iFilteredTotal": oSettings.fnRecordsDisplay(),
					"iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
					"iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
				};
			}
			
			/* Bootstrap style pagination control */
			$.extend( $.fn.dataTableExt.oPagination, {
				"bootstrap": {
					"fnInit": function( oSettings, nPaging, fnDraw ) {
						var oLang = oSettings.oLanguage.oPaginate;
						var fnClickHandler = function ( e ) {
							e.preventDefault();
							if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
								fnDraw( oSettings );
							}
						};
			
						$(nPaging).addClass('pagination').append(
							'<ul>'+
								'<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
								'<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
							'</ul>'
						);
						var els = $('a', nPaging);
						$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
						$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
					},
			
					"fnUpdate": function ( oSettings, fnDraw ) {
						var iListLength = 5;
						var oPaging = oSettings.oInstance.fnPagingInfo();
						var an = oSettings.aanFeatures.p;
						var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
			
						if ( oPaging.iTotalPages < iListLength) {
							iStart = 1;
							iEnd = oPaging.iTotalPages;
						}
						else if ( oPaging.iPage <= iHalf ) {
							iStart = 1;
							iEnd = iListLength;
						} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
							iStart = oPaging.iTotalPages - iListLength + 1;
							iEnd = oPaging.iTotalPages;
						} else {
							iStart = oPaging.iPage - iHalf + 1;
							iEnd = iStart + iListLength - 1;
						}
			
						for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
							// Remove the middle elements
							$('li:gt(0)', an[i]).filter(':not(:last)').remove();
			
							// Add the new list items and their event handlers
							for ( j=iStart ; j<=iEnd ; j++ ) {
								sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
								$('<li '+sClass+'><a href="#">'+j+'</a></li>')
									.insertBefore( $('li:last', an[i])[0] )
									.bind('click', function (e) {
										e.preventDefault();
										oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
										fnDraw( oSettings );
									} );
							}
			
							// Add / remove disabled classes from the static elements
							if ( oPaging.iPage === 0 ) {
								$('li:first', an[i]).addClass('disabled');
							} else {
								$('li:first', an[i]).removeClass('disabled');
							}
			
							if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
								$('li:last', an[i]).addClass('disabled');
							} else {
								$('li:last', an[i]).removeClass('disabled');
							}
						}
					}
				}
			});			
			/* Table #example */
			var table;
			$(document).ready(function() { 
				table= $('.datatable').dataTable( {
					"sPaginationType": "bootstrap",
					"oLanguage": {
						"sLengthMenu": "_MENU_ 记录每页",
						"sZeroRecords": "抱歉， 没有找到",
						"sProcessing" : "正在加载中......",
						"sInfoEmpty": "没有数据",
						"sSearch" : "搜索",
						"sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条", 
						"oPaginate": {    
		                    "sFirst" : "第一页",    
		                    "sPrevious" : "上一页",    
		                    "sNext" : "下一页",    
		                    "sLast" : "最后一页"    
		                }  
					},
					"bProcessing": true,//关闭加载数据提示
					"bServerSide": true,
					"bSort": false, //关闭排序功能
					"bLengthChange": false,//关闭选择每页显示数量
					"bFilter": false, //关闭过滤功能
					"bInfo": false,//关闭页脚信息
					"sAjaxSource": "${webRoot}ext/tlist.do",
					"aoColumns": [
						{ "sName": "eid","bVisible" : false },//0
				        { "sName": "coverimg" ,sWidth: '25%'},//1
				        { "sName": "title" ,"bVisible" : false},//2
				        { "sName": "summary" ,"bVisible" : false},//3
				        { "sName": "author" ,"bVisible" : false},//4
				        { "sName": "createtime" ,"bVisible" : false},//5
				        { "sName": "supportnum","bVisible" : false},//6
				        { "sName": "pos","bVisible" : false}//7
				    ],
				    
				    "fnRowCallback" : function(nRow, aData, iDisplayIndex) {  
				        var cover = "${uploadRoot}ext/cover/default.png";
				    	if(aData[1]!=null&&aData[1]!=""){
				    	   cover =aData[1];
				    	}
				        var pos="";
				        if(aData[7]==1){
				        	pos="<code>荐</code>";
				        }
				        if(!aData[3]){
				        	aData[3] = "<br/><br/>";
				        }
				        $('td:eq(0)', nRow).html('<ul class="thumbnails"><li class="span2"><a class="thumbnail" href="${webRoot}ext/'+aData[0]+'.do" target="_blank"><img alt="'+aData[2]+'" title="'+aData[2]+'" src="'+cover+'" /></a></li><li class="span6"><h4>'+pos+'<a href="${webRoot}ext/'+aData[0]+'.do" target="_blank">'+aData[2]+'</a></h4><p style="margin-top:4px;text-indent:2em;">'+aData[3]+'</p><p>作者：'+aData[4]+'    &nbsp;&nbsp;&nbsp;&nbsp; <i>'+timeStamp2String(aData[5].time)+'</i> &nbsp;&nbsp;&nbsp;&nbsp; <code>'+aData[6]+'赞</code></p></li></ul>');
	                    return nRow;  
                    }
				});
				$("#example").find("thead").remove();//关闭thead标签
				$("#example_processing").remove();//关闭数据加载提示
			});
		</script>
</body>
</html>
